<include file="public/header" />
<body>
<div class="layui-fluid">
  <div class="layui-row">
    <form class="layui-form">
      <div class="layui-form-item">
        <label for="username" class="layui-form-label">
          <span class="x-red">*</span>名称
        </label>
        <div class="layui-input-inline">
          <input type="text" id="name" name="title" value="" required="" lay-verify="required"
                 autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">说明</label>
          <div class="layui-input-inline">
            <input type="text"  name="explain" value="" required="" lay-verify="required"
                   autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">排序<span style="color: red;">(必填)</span></label>
          <div class="layui-input-block">
            <input type="number" name="sort"  lay-verify="required"  value="" style="width: 50px !important;" autocomplete="off" placeholder="" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">显示</label>
          <div class="layui-input-block">
            <input type="radio" name="status" value="1" title="是" checked="" >
            <input type="radio" name="status" value="2" title="否" >
          </div>
        </div>
        <div class="layui-form-item" >
          <div class="layui-input-block">
            <input type="hidden" name="product_id" value="{$product_id}">
            <button type="button"  class="layui-btn" lay-submit=""  lay-filter="addEdit">保存</button>
          </div>
        </div>
    </form>
  </div>
</div>

<table id="demo" lay-filter="edit"></table>
<script type="text/html" id="barDemo">
  <!--    <a class="layui-btn layui-btn-xs" lay-event="view">查看</a>-->
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>

  layui.use(['form', 'layedit', 'laydate','jquery','upload','table','util'], function(){
    var form = layui.form
            ,layer = layui.layer
            , $ = layui.jquery
            , table = layui.table
            ,util = layui.util;
    var layedit = layui.layedit;
    //拖拽上传
    var titleTpl = function (d) { //名字需要和上面定义的名字对应上
      var title = d.title
      return '<input type="text" class="layui-input" onclick="updatefiled('+d.id+','+title+',"title")" name="title" value="'+title+'" > ';
    };
    table.render({
      elem: '#demo'
      ,url: "{:url('/goods/attList',['product_id'=>$product_id])}" //数据接口
      ,page: true //开启分页
      ,toolbar: '#toolbarDemo'
      ,width:'100%'
      ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
      ,totalRow: true // 开启合计行
      ,response: {
        statusName: 'code' //规定数据状态的字段名称，默认：code
        ,statusCode: 200 //规定成功的状态码，默认：0
        ,msgName: 'msg' //规定状态信息的字段名称，默认：msg
        ,countName: 'total' //规定数据总数的字段名称，默认：count
        ,dataName: 'data' //规定数据列表的字段名称，默认：data
      }
      ,cols: [[ //表头
        {type: 'checkbox', fixed: 'left'},
        {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
        ,{field: 'title', title: '规格名称',width:200}
        ,{field: 'explain', title: '描述',width:100, }
        ,{field: 'sort', title: '排序',width:80, sort: true }
        ,{field: 'status', title: '开关',width:120,}
        ,{field: 'create_time', title: '创作时间',width:200}
        ,{fixed: 'right', title:'操作',  width:200,toolbar: '#barDemo'}
      ]]
      ,id: 'testReload'

      // ,parseData: function(res){ //res 即为原始返回的数据
      // return {
      //     "code": 0, //解析接口状态
      //     "msg": res.message, //解析提示文本
      //     "count": res.total, //解析数据长度
      //     "data": res.data.item //解析数据列表
      // };
      // }
    });
    //触发单元格工具事件
    table.on('tool(edit)', function(obj){ // 双击 toolDouble
      var data = obj.data;
      var id= obj.data.id;
      switch (obj.event){
        case 'del':
          // 删除按钮
          layer.confirm('确认删除？', {
            btn: ['确定', '取消'] //按钮
          }, function () {
            $.ajax({
              type: 'post',
              url: "{:url('/Goods/attrDel')}",
              data : {id:obj.data.id},
              dataType: 'json',
              success: function (data) {

                if (data.code == 200) {
                  layer.msg(data.msg, {icon: 1,time:100});
                  obj.del();
                } else {
                  layer.alert(data.msg, {icon: 2});
                }
              }
            })
          }, function () {
            layer.closeAll();
          });
          break;
        case 'edit':
          layer.open({
            title: '编辑',
            type: 2,
            area: ['90%','90%'],
            content:  "{:url('/Goods/editGoods')}?id="+id,
          });
          break;
        case 'attr':
          layer.open({
            title: '查看',
            type: 2,
            area: ['90%','90%'],
            content:  "{:url('/Goods/editAttr')}?id="+id,
          });
          break;
      }
    })


    form.on('submit(addEdit)', function(data){
      $.post($('form').attr('action'),data.field,function(data){
        if(data.code == 200){
          layer.msg(data.msg);
          location.reload();
        }else {
          layer.msg(data.msg);
        }
      });
      return false;
    });
  });



  function updatefiled(id,val,filed){
    $.ajax({
      type: 'post',
      url:"{:url('/Goods/updateField')}",
      dataType: 'json',
      data:{id:id,filed:filed,val:val},
      success: function(data){
        // if(!$(obj).hasClass('no') && !$(obj).hasClass('yes'))
        if(data.code==200){
          setTimeout(

                  layer.msg('success', {icon: 1,time:1000}),
                  2000);

        }else {
          layer.msg('异常', {icon: 2});
        }

      }
    });
  }


</script>
</body>

</html>
